<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="sb" uri="/struts-bootstrap-tags" %>
<%@taglib prefix="sj" uri="/struts-jquery-tags"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta charset="utf-8" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<title><s:text name="label.index"/></title>
		
		<link href="<s:url value="/css/zice.style.css"/>" rel="stylesheet" type="text/css" />
		<link href="<s:url value="/css/icon.css"/>" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="<s:url value="/components/tipsy/tipsy.css"/>" media="all"/>
<style type="text/css">
	html {
		background-image: none;
	}
	label.iPhoneCheckLabelOn span {
		padding-left:0px
	}
	#versionBar {
		background-color:#212121;
		position:fixed;
		width:100%;
		height:35px;
		bottom:0;
		left:0;
		text-align:center;
		line-height:35px;
		z-index:11;
	}
	.copyright{
		text-align:center; font-size:10px; color:#CCC;
	}
	.copyright a{
		color:#A31F1A; text-decoration:none
	}    
</style>

</head>
<body >
         
<div id="alertMessage" class="error"><s:if test="hasActionErrors()"><s:actionerror/></s:if></div>
<div id="successLogin"></div>
<div class="text_success"><img src="<s:url value="/images/loadder/loader_green.gif"/>"  alt="Login To Dashboard" /><span>Please wait</span></div>

<div id="login" style="height: 230px;">
  <div class="ribbon"></div>
  <div class="inner">
  <div class="logo" style="margin-top:30px"><img src="<s:url value="/images/logo/logo_login.png"/>" alt="BANKDATA" /></div>
  <div class="formLogin" style="height: 130px;">
  <s:form name="formLogin" id="formLogin" action="%{actionMethod}" method="post">
		  <s:hidden name="previousPage" />
          <s:hidden name="actionMethod" value="%{actionMethod}"/>
          <s:hidden name="subaction"/>
          <s:token/>

          <div class="tip">
				<input name="loginId" type="text"  id="username_id" title="Username" maxlength="64"/>
          </div>
          <div class="tip">
				<input name="password" type="password" id="password" title="Password" maxlength="32"/>
          </div>
		  <!-- div class="tip">
				<input name="captchaInput" type="text" id="captchaInput" title="Captcha" maxlength="6" autocomplete="off"/>
          </div>
          <div class="tip" style="text-align: center">
          		<img src="././kaptcha.jpg" width="240" height="50" alt="SecurityCode" id="kaptchaImage"/>
                <br/><small>Can't read the image? Click it to get a new one.</small>
                <br/>
          </div-->

          <div class="loginButton">
            <!-- div style="float:left; margin-left:-9px;">
				<input type="checkbox" id="on_off" name="remember" class="on_off_checkbox"  value="1"   />
				<span class="f_help">Remember me</span>
			</div-->
			<div style="text-align: right; ">
              <div> 
                <ul class="uibutton-group">
                   <li><s:reset cssClass="uibutton normal" key="label.reset" id="forgetpass" cssStyle="width:70px; margin-left: 1.5px;"/></li>
                   <li style="width:6px">&nbsp;</li>
				   <li><s:submit cssClass="uibutton confirm" key="label.submit" action="%{actionMethod}" cssStyle="width:70px"/></li>
               </ul>
              </div>
			  
            </div>
			<div class="clear"></div>
		  </div>

    </s:form>
  </div>
</div>
  <div class="clear"></div>
  <div class="shadow"></div>
</div>

<!--Login div-->
<div class="clear"></div>
<div id="versionBar" >
  <div class="copyright" > &copy; Copyright 2012  All Rights Reserved <span class="tip"><a  href="#" title="Lemurian Satu Nusa" >Lemurian Satu Nusa</a> </span> </div>
  <!-- // copyright-->
</div>
<!-- Link JScript-->
<script type="text/javascript" src="<s:url value="/js/jquery.min.js"/>"></script>
<script type="text/javascript" src="<s:url value="/components/effect/jquery-jrumble.js"/>"></script>
<script type="text/javascript" src="<s:url value="/components/ui/jquery.ui.min.js"/>"></script>     
<script type="text/javascript" src="<s:url value="/components/tipsy/jquery.tipsy.js"/>"></script>
<script type="text/javascript" src="<s:url value="/components/checkboxes/iphone.check.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/login.js"/>"></script>

<script type="text/javascript">

	$(document).ready(function () {
    	$('#formLogin').submit(function(e) {

            var $form = $(this);
            var formData = $form.serializeArray();

            $.ajax({
                type: 'POST',
                dataType:'json',
                url: 'LoginAction_login.do',
                data: formData,
                success: function(data) {
                   var message = data.jsonMessage;

                   console.log(message);
                   
                   if(message != 'Success') {

                	  $("#kaptchaImage").hide()
                      .attr('src', '././kaptcha.jpg' )
                      .fadeIn();
                                       	   
                   	  showError(message);
           			  $('.inner').jrumble({ x: 4,y: 0,rotation: 0 });	
           			  $('.inner').trigger('startRumble');
           			  setTimeout('$(".inner").trigger("stopRumble")',500);
           			  setTimeout('hideTop()',5000);
           			  return false;

                      hideTop();
               		  loading('Checking',1);		
               		  setTimeout( "unloading()", 2000 );
               		  setTimeout( "Login()", 2500 );
                   } else {
                	   $("#login").animate( {
                			opacity : 1,
                			top : '49%'
                		}, 200, function() {
                			$('.userbox').show().animate( {
                				opacity : 1
                			}, 500);
                			$("#login").animate( {
                				opacity : 0,
                				top : '60%'
                			}, 500, function() {
                				$(this).fadeOut(200, function() {
                					$(".text_success").slideDown();
                					$("#successLogin").animate( {
                						opacity : 1,
                						height : "200px"
                					}, 500);
                				});
                			})
                		})
                	   console.log('Redirect to : HomeAction_dashboard.do');
                	   setTimeout("window.location.href='HomeAction_dashboard.do'", 3000);
                   }
                }
            });
            
            e.preventDefault();
        });

    	$('#kaptchaImage').click(function () {
            $(this).hide()
            .attr('src', '././kaptcha.jpg' )
            .fadeIn();
        });
    });
        
</script>
</body>
</html>